<template>
	<view class="get-coupon-page">
		<tabs v-if="!ma" sticky-bg-color="transparent" :show-bar="true" :current="active" bg-color="transparent"
			@change="changeActive" :config="{activeColor: '#24A3FF', underLineColor: '#24A3FF'}">
			<tab title="全部"></tab>
			<tab title="零售券"></tab>
			<tab title="租赁券"></tab>
			<tab title="充值券"></tab>
		</tabs>


		<view class="main-box">
			<view class="item" v-for="(item, index) in couponList" :key="index">
				<image v-if="item.type == 1" src="../../static/images/coupon_type_1.png" mode="widthFix"
					class="type-icon"></image>
				<image v-if="item.type == 2" src="../../static/images/coupon_type_2.png" mode="widthFix"
					class="type-icon"></image>
				<image v-if="item.type == 3" src="../../static/images/coupon_type_3.png" mode="widthFix"
					class="type-icon"></image>
				<view class="top-bar">
					<view class="left">
						<image :src="item.image" mode="widthFix" class="icon"></image>
						<view class="info">
							<text class="text">{{item.name}}</text>
							<text class="date">{{item.start_time}}-{{item.end_time}}</text>
						</view>
					</view>
					<view class="right">
						<price-format color="var(--primary-price-color)" :first-size="56" :subscript-size="30"
							:price="item.amount" :weight="500"></price-format>
						<text class="text">满{{item.enough}}减{{item.amount}}</text>
					</view>
				</view>

				<image src="../../static/images/line.png" mode="" class="line-img"></image>

				<view class="footer-bar">
					<view class="left">
						<text class="desc">{{item.type_name}}商城可用</text>
						<view class="btn" @tap="onToggleItemDesc(item, index)">
							使用说明
							<u-icon v-if="!item.isOpen" class="ml10" name="arrow-down" color="#2979ff"
								size="28"></u-icon>
							<u-icon v-else class="ml10" name="arrow-up" color="#2979ff" size="28"></u-icon>
						</view>
					</view>
					<view class="right">
						<view @tap="receiveCoupon(item.id)" class="btn btn1">立即领取</view>
						<!-- <view v-if="item.type == 2" class="btn btn2">去使用</view> -->
					</view>
				</view>

				<view class="context" v-if="item.isOpen">
					<view class="row">
						<view class="label">使用时间：</view>
						<view class="text">{{item.start_time}}-{{item.end_time}}</view>
					</view>
					<!-- <view class="row">
						<view class="label">编号：</view>
						<view class="text">fjlkjlkjflww23878</view>
					</view> -->
					<view class="row">
						<view class="text">{{item.description}}</view>
					</view>
				</view>
			</view>

			<loading-footer :status="status"></loading-footer>


			<!-- 			<view v-else class="column-center" style="padding-top: 200rpx">
			    <image class="img-null" src="/static/images/coupon_null.png"></image>
			    <text class="muted">暂无优惠券可领～</text>
			</view> -->
		</view>

		<view class="footer-box">
			<navigator hover-class="none" url="/package_user/pages/user_exchange_coupon/index" class="btn">使用券码领券
			</navigator>
		</view>

	</view>
</template>

<script>
	import {
		loadingType
	} from '../../../utils/type'
	import {
		loadingFun
	} from '../../../utils/tools'
	import {
		getCouponList,
		addCoupon,
		getCouponAllList
	} from '../../../api/user'
	export default {
		data() {
			return {
				active: 0,
				couponList: [],
				showNull: false,
				page: 1,
				status: loadingType.LOADING,
				ma: null,
			}
		},
		async onLoad(options) {
			uni.$on('updateCounponList', (e) => {
				this.ma = e;
				this.changeActive(0);
			})
		},
		async onShow() {
			this.getCouponListFun();
		},
		onReachBottom() {
			this.getCouponListFun();
		},
		onUnload() {
			uni.$off('updateCounponList')
		},
		methods: {
			changeActive(e) {
				this.page = 1;
				this.active = e;
				this.status = loadingType.LOADING;
				this.couponList = [];
				this.getCouponListFun();
			},
			async getCouponListFun() {
				let data = null;
				if (!this.ma)
					data = await loadingFun(getCouponList, this.page, this.couponList, this.status, {
						type: this.active
					})
				else
					data = await loadingFun(getCouponAllList, this.page, this.couponList, this.status, {
						ma: this.ma
					})
				if (!data) return;
				this.couponList = data.dataList.map(v => ({
					...v,
					isOpen: v.isOpen ?? false
				}));
				this.status = data.status;
				this.page = data.page;
			},

			onToggleItemDesc(item, index) {
				this.couponList[index].isOpen = !item.isOpen
			},

			async receiveCoupon(id) {
				const data = await addCoupon({
					id,
					ma: ''
				});
				uni.showToast({
					icon: 'none',
					title: data.msg
				})
			}
		},
	}
</script>

<style lang="scss">
	@import "index.scss";
</style>